<!--  -->
<template>
  <div>
     <div class="topp">
         <img :src="resulop.coverImgUrl"/>
         <div class="texttui">
             <p>{{resulop.name}}</p>
             <p>{{resulop.description}}</p>
         </div>
     </div>
     <div class="tabg">
<span class="item" :class="{active:tag=='全部'}" @click="tag='全部'">全部</span>
<span class="item" :class="{active:tag=='欧美'}" @click="tag='欧美'">欧美</span>
<span class="item" :class="{active:tag=='华语'}" @click="tag='华语'">华语</span>
<span class="item" :class="{active:tag=='流行'}" @click="tag='流行'">流行</span>
<span class="item" :class="{active:tag=='说唱'}" @click="tag='说唱'">说唱</span>
<span class="item" :class="{active:tag=='摇滚'}" @click="tag='摇滚'">摇滚</span>
<span class="item" :class="{active:tag=='民谣'}" @click="tag='民谣'">民谣</span>
<span class="item" :class="{active:tag=='电子'}" @click="tag='电子'">电子</span>
<span class="item" :class="{active:tag=='轻音乐'}" @click="tag='轻音乐'">轻音乐</span>
<span class="item" :class="{active:tag=='影视原声'}" @click="tag='影视原声'">影视原声</span>
<span class="item" :class="{active:tag=='ACG'}" @click="tag='ACG'">ACG</span>
<span class="item" :class="{active:tag=='怀旧'}" @click="tag='怀旧'">怀旧</span>
<span class="item" :class="{active:tag=='治愈'}" @click="tag='治愈'">治愈</span>
<span class="item" :class="{active:tag=='旅行'}" @click="tag='旅行'">旅行</span>



     </div>

<div class="tuilist" >
       <div class="tuili" v-for="(item,index) in playlisty" :key="index">
           <img :src="item.coverImgUrl"/>
           <p>{{item.name}}</p>
       </div>

</div>
<div class="fenyeuw">
    <div class="fenyetu">
      <!-- total 总条数
      current-page当前页
      page-size 每页多少条数据 -->

    <el-pagination
    @current-change="handleCurrentChange"
  background
  layout="prev, pager, next"
  :total="total"
  :current-page="page"
  
   ></el-pagination>
</div>
</div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'tuijian',
  data(){
      return{
        //  总条数
         total:0,
         //页码
         page:1,
        
         resulop:{},
         playlisty:[],
         tag:"全部"
      }
  },
  watch:{
      tag(){
      console.log(this.tag)
       //顶部的精品歌单
   this.topdata()
  //歌单列表
   this.listdata()
   //修改页码为1
   this.page = 1
      }
  },
 created(){
     //顶部的精品歌单
   this.topdata()
  //歌单列表
   this.listdata()
   
   
     

 },

 methods:{
    //  页面改变事件
    
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        // 保存页码
        this.page=val
        //重新获取数据
        this.listdata()
      },

   //抽取的方法1 顶部的数据
      topdata(){
axios({
         url:"https://autumnfish.cn/top/playlist/highquality",
         method:"get",
         params:{
             limit:1,
             //分类数据
             cat:this.tag
         }
     }).then(res=>{
        
  this.resulop=res.data.playlists[0]
     })
          
      },
      //抽取的方法2 列表的数据
    listdata(){
        axios({
         url:"https://autumnfish.cn/top/playlist/",
         method:"get",
         params:{
             limit:10,
             //分类数据
             cat:this.tag,
            //  起始值 （页码-1）*每页多少条数据
             offset:(this.page-1)*10    
         }
     }).then(res=>{
         console.log(res)
//   this.resulop=res.data.playlists[0]
       this.playlisty=res.data.playlists
       console.log(this.playlisty)
       this.total=res.data.total
     })
    }

   //

 }

}

</script>
<style>
 .topp{
     height: 400px;
     display: flex;
    align-items: center;
 }
 .topp img{
     width: 100px;
     height: 100px;
     margin-left: 30px;
 }
 .topp .texttui{
     width: 1000px;
     height: 300px;
     margin-left: 50px;
 }
  .topp .texttui p{
      margin-top: 35px;
      font-size: 12px;
  }
  
.fenyeuw{
    height: 30px;
    background: chartreuse;
    
}
.fenyeuw .fenyetu{
    width: 500px;
    height: 30px;
    margin: 0 auto;
}

 .tuilist{
     display: flex;
     flex-wrap: wrap;
     align-content: flex-start;
     height: 600px;
 }
.tuilist .tuili{
    display: flex;
    flex-direction: column;
 align-items: center;
    width: 180px;
    height: 200px;
    margin-left: 120px;
    margin-top:30px;
} 
.tuilist .tuili img{
    width: 150px;
    height: 170px;
}
.tuilist .tuili p{
    font-size: 12px;
    text-align: center;
}
.tabg{
    height: 30px;
    background: chartreuse;
    text-align: end;
    line-height: 30px;
    font-size: 16px;
}
.tabg span{
   
    margin-right: 30px;
}
.tabg span.active{
    color: red;
}

</style>